<template>
  <el-form class="login-content-form">
    <el-form-item class="login-content-top">
      <img src="../../../assets/log.webp" @click="imageAnimote" style="width: 100px; height: 100px;border-radius: 50%" alt=""/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="phoneNumber" placeholder="请输入账号"/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="passWord" type="password" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item class="login-content-buttom">
      <el-button type="primary" @click="onLogin">{{ loginText }}</el-button>
      <el-button type="primary" @click="onRegister">{{ RegisterText }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {login, onlogin, onRegisterLogin} from '../../../api/login/index'
import {ElMessage, ElMessageBox, ElLoading} from 'element-plus';
import {useStore} from '../../../store/index';
import {useRoute, useRouter} from 'vue-router';
import {Session} from '../../../utils/storage';

const loginText = ref('登 录')
const RegisterText = ref('注 册')
const store = useStore()
const route = useRoute()
const router = useRouter()
const phoneNumber = ref()
// const username = ref()
const passWord = ref()

const onLogin = () => {
  const param = {
    phone: phoneNumber.value,
    // usernumber: phoneNumber.value,
    pwd: passWord.value,
    // programid: 26
  }
  // const res = login(param)
  const res = onlogin(param)

  res.then(res => {
    console.log(res)
    Session.set('token', res.token);
    Session.set('userInfo', {
      deptid:res.deptid,
      username:res.username,
      usernumber:res.usernumber,
      depname:res.depname,
    });
    if (res.success) {
      store.dispatch('userInfo/setUserInfo', res.menulist)
      signInSuccess()
      ElMessage.success(res.success);
    } else {
      ElMessage.error(res.error);
    }
  })
}
const signInSuccess = () => {
  router.push({
    path: '/home',
  })
}
const onRegister = () => {
  const param = {
    phone: phoneNumber.value,
    password: passWord.value,
    name : '田景宇',
  } as any

  const res = onRegisterLogin(param)
  res.then(res => {
    console.log(res)
    if (res.code === 200) {
      ElMessage.success(res.message);
      phoneNumber.value = ''
      passWord.value = ''
    } else {
      ElMessage.error(res.error);
      phoneNumber.value = ''
      passWord.value = ''
    }
  })
}
const imageAnimote = ()=>{
  let img = document.getElementsByTagName('img')[0];
  img.style.transform = 'rotateY(180deg)';
  setTimeout(() => {
    img.style.transform = 'rotateY(0deg)';
  }, 1000);
}
</script>


<style scoped lang="scss">
.login-content-form {
  .login-content-top {
    text-align: center;
  }

  //给input输入框设置成透明色
  ::v-deep .el-input__inner {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  .login-content-buttom {
    text-align: center;
  }
}

</style>
